<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const centerDialogVisible = ref(false)
import { listWorkorderWeek, getListBom, getWorkorderWeekAndNum } from "@/api/workorder/workorder"
import { getTaskWeekAndNum } from "@/api/task/task"
// 假设引入通知相关API
import { getWarehouseNotifications, updateNotificationStatus } from "@/api/system/sysmessage"
import { getTaskDayAndNum, getTaskDay } from '@/api/task/task'
import { listMachinery } from '@/api/machinery/machinery'
import { getWarehouseNotifications, updateNotificationStatus, getSHNotifications } from "@/api/system/sysmessage"
import { getTaskDayAndNum } from '@/api/task/task'
import { listMachinery } from '@/api/machinery/machinery'
import Machinery from '@/views/machinery/machinery/index.vue'
const showNotic = ref(false)
const num1 = ref(1)//当前查看通知如果是补货通知，就代表工单的数量
const { proxy } = getCurrentInstance()
//总设备数
const alldevice = ref(0)
//总设备列表
const alldeviceList = ref({
  form: {},
  queryDevParams: {
    pageNum: 1,
    pageSize: 10,
    machineryCode: null,
    machineryName: null,
  },
})
//运行中的设备数
const deviceNum = ref(0)
//运行中的设备列表
const deviceList = ref([])
// 时间格式化函数（处理后端返回的时间戳或字符串）
const formatTime = (timeStr) => {
  if (!timeStr) return '未知时间';
  // 若后端返回时间戳（毫秒），转成Date对象
  const date = typeof timeStr === 'number' ? new Date(timeStr) : new Date(timeStr);
  // 格式化年月日
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  // 格式化时分
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}`;
};

import useUserStore from "@/store/modules/user"


const useStore = useUserStore()
const currUser = ref({ roles: [] }) // 初始化roles为空数组，避免null错误
// 创建图表引用
const chartRef = ref(null);

// 仓库通知相关
const warehouseNotifications = ref([])
const showNotifications = ref(false) // 控制通知面板显示/隐藏
// 审核通知相关
const auditNotifications = ref([])

const getStatusType = (status) => {
  const statusMap = {
    '已完成': 'COMPLETED',
    '进行中': 'IN_PROGRESS',
    '未开始': 'info',
    '已暂停': 'warning',
    '已取消': 'danger'
  }
  return statusMap[status] || 'info'
}
const tableData = ref([])
const { queryDevParams } = toRefs(alldeviceList)
//控制设备列表表单
const newTablebutton = ref(false)
let xsl0 = ref([]);//任务完成量
let xse0 = ref([]);//任务总量
let xszzl0 = ref([]);//工单数量
let myData20 = ref([]);//横坐标

onMounted(async () => {
  await getCurrentUser()
  // 根据角色决定是否初始化图表
  if (hasRole('admin') || hasRole('shangchan') || hasRole('shebei')) {
    getWorkorderWeekNum()
    getTaskWeekNum()
    Chart1()
  }
  // 所有角色都可以获取工单数据
  getWorkorderWeek()
  getallDevice()
  getDAay()
  today()
  // 仓库角色获取通知
  if (hasRole('cangku')) {
    getWarehouseNotices()
  }
  if (hasRole('shangchan')) {
    GetSHNotifications()
  }
});

// 获取当前登录用户
async function getCurrentUser() {
  try {
    const userInfo = await useStore.getInfo();
    currUser.value = userInfo || { roles: [] }; // 确保roles始终存在
    console.log("当前登录用户", currUser.value);
  } catch (error) {
    console.error("获取用户信息失败", error);
    currUser.value = { roles: [] }; // 出错时仍保证roles存在
  }
}
//所有的设备列表
function getallDevice() {
  listMachinery(queryDevParams).then(response => {
    console.log(response)
    console.log("设备列表", response.rows)
    alldevice.value = response.total
    // alldeviceList.value=response.data
  })
}
//获取当天的任务数
function getDAay() {
  getTaskDayAndNum().then(response => {
    deviceList.value = response.data
    deviceNum.value = response.data.length
  })
}

//打开当天任务对话框
function showToday() {
  console.log("打开对话框");

  openTask.value = true
}
const openTask = ref(false)
// const loadingTask=ref(true)
const todayRenwu = ref([])//存储当天的任务
const todayCount = ref()//存储当天的任务数
//获取当天的任务数
function today() {
  getTaskDay().then(res => {
    todayRenwu.value = res.data
    todayCount.value = res.data.length
    // console.log("任务");
    // console.log(todayCount.value);
    // console.log(res);
  }
  )
}
//打开当天任务对话框
function showToday() {
  console.log("打开对话框");

  openTask.value = true
}
// 角色判断工具函数
function hasRole(role) {
  return currUser.value?.roles?.includes(role) || false;
}

// 获取仓库通知
async function getWarehouseNotices() {
  try {
    const response = await getWarehouseNotifications()
    warehouseNotifications.value = response.data || []
    console.log("仓库通知数据", warehouseNotifications.value)
  } catch (error) {
    console.error("获取仓库通知失败", error)
  }
}
async function GetSHNotifications() {
  try {
    const response = await getSHNotifications()
    console.log("审核通知数据", response);
    auditNotifications.value = response.data || []
    if (response.data.length > 0) {
      centerDialogVisible.value = true
    }
  } catch (error) {
    console.error("获取审核通知失败", error)
  }
}

//点击知道了处理审核消息
async function handSHnotice() {
  for (let i = 0; i < auditNotifications.value.length; i++) {
    await finishNoticClick2(auditNotifications.value[i].messageId, "已处理")
  }
  centerDialogVisible.value = false
}


function Chart1() {
  // 确保 DOM 已经渲染完成后再初始化 echarts
  var chartDom = document.getElementById('middle');
  if (!chartDom) return; // 确保DOM存在

  var myChart = echarts.init(chartDom);

  let xsl = xsl0.value;//任务完成量
  let xse = xse0.value;//任务总量
  let xszzl = xszzl0.value;//工单数量
  let myData2 = myData20.value;//横坐标
  const isRedList = new Array(xse.length).fill(0);
  const max = Math.max(...xse, 1);
  const getSymbolData = (datas) => {
    let arr = [];
    for (var i = 0; i < datas.length; i++) {
      isRedList[i] = max;
      arr.push({
        value: datas[i],
        symbolPosition: "end",
      });
    }
    return arr;
  };

  let option = {
    //你的代码
    backgroundColor: "#041C44",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      confine: true, // 超出范围
      backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
      //   borderColor: "rgba(255, 255, 255, .8)",
      formatter: "{b}<br>{a}：{c}个<br>{a1}：{c1}个<br>{a2}：{c2}单",
    },
    legend: {
      top: "4%",
      y: "center",
      itemWidth: 14,
      itemHeight: 4,
      itemGap: 15,
      textStyle: {
        fontSize: 12,
        color: "#fff",
        padding: [0, 0, 0, 6],
      },
    },
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: myData2,
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: "#1C82C5",
          },
        },
        axisLabel: {
          interval: 0,
          margin: 10,
          color: "#05D5FF",
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "任务完成数（个）",
        splitNumber: 5,
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 0, 0, 0],
        },
        axisLabel: {
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: 14,
            color: "#fff",
            lineHeight: 16,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(28, 130, 197, .3)",
            type: "dashed",
          },
        },
      },
      {
        name: "任务总数（个）",
        splitNumber: 5,
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 0, 0, 0],
        },
        axisLabel: {
          show: true,
          fontSize: 12,
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        // name: "销售增长率（%）",
        splitNumber: 5,
        // offset: 50,
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 0, 0, 0],
        },
        axisLabel: {
          show: false,
          fontSize: 12,
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "任务完成量",
        type: "bar",
        yAxisIndex: 0,
        barWidth: "16",
        barGap: "50%",
        data: xsl,
        itemStyle: {
          // borderRadius: [2, 2, 0, 0],
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(16, 160, 242, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 82, 184, 0)",
              },
            ],
          },
        },
      },
      {
        name: "任务总量",
        type: "bar",
        yAxisIndex: 1,
        barWidth: "16",
        barGap: "50%",
        data: xse,
        itemStyle: {
          // borderRadius: [2, 2, 0, 0],
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 216, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 216, 255, 0)",
              },
            ],
          },
        },
      },
      {
        name: "工单数量",
        yAxisIndex: 2,
        type: "line",
        showSymbol: true,
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          normal: {
            color: "#02D3EA",
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 255, 246, 0.16)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 246, 0)",
                },
              ],
              false
            ),
          },
        },
        itemStyle: {
          color: "#02D3EA",
          borderColor: "#02D3EA",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "top",
          formatter: "{c}",
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        data: xszzl, // 折线图的数据
      },
      {
        type: "pictorialBar",
        symbol: "react",
        symbolSize: [18, 3],
        symbolOffset: [-12, -2],
        z: 12,
        itemStyle: {
          color: "#00BAFF",
          shadowColor: "#00BAFF",
          shadowBlur: 20,
        },
        data: getSymbolData(xsl),
      },
      {
        type: "pictorialBar",
        symbol: "react",
        symbolSize: [18, 3],
        symbolOffset: [12, -2],
        z: 12,
        itemStyle: {
          color: "#00EAFF",
          shadowColor: "#00EAFF",
          shadowBlur: 20,
        },
        data: getSymbolData(xse),
      },
    ],
  };

  option && myChart.setOption(option);

  // 监听窗口大小变化，自动调整图表
  window.addEventListener('resize', () => {
    myChart.resize();
  });
}


async function getTaskWeekNum() {
  await getTaskWeekAndNum().then(response => {
    // console.log("工单数据1", response.rows);
    xsl0.value = response.rows.map(item => parseInt(item.attr3))
    xse0.value = response.rows.map(item => parseInt(item.attr2))
    // xsl.value = response.rows.map(item => item.completeNum)
    // xse.value = response.rows.map(item => item.totalNum)
    // xszzl.value = response.rows.map(item => item.completePercent)
    // getOption()
    Chart1()
  }).catch(error => {
    console.error("获取近一周任务数据失败", error);
  })
}


async function getWorkorderWeekNum() {
  await getWorkorderWeekAndNum().then(response => {
    // console.log("工单数据2", response.rows);
    myData20.value = response.rows.map(item => item.createTime.substring(0, 10))
    console.log("工单数据2", myData20.value);
    //去每一个对象中的attr2字段的值，转成数值类型
    xszzl0.value = response.rows.map(item => parseInt(item.attr2))
    console.log("工单数据2", myData20.value);
    console.log("工单数据2", xszzl0.value);

    // console.log("工单数据2", xszzl0.value);
    //createTime截取到年-月-日



    // xsl.value = response.rows.map(item => item.completeNum)
    // xse.value = response.rows.map(item => item.totalNum)
    // xszzl.value = response.rows.map(item => item.completePercent)
    // getOption()
  }).catch(error => {
    console.error("获取近一周工单数据失败", error);
  })
}





function getWorkorderWeek() {
  listWorkorderWeek().then(response => {
    tableData.value = response.rows
    console.log("工单数据", response.rows)
  }).catch(error => {
    console.error("获取工单数据失败", error);
  })
}




const BomData = ref([])
//点击查看通知按钮
async function ShowNoticClick(productId, num, noticeItem) {
  console.log("传递的num值：", num, typeof num); // 检查值和类型
  num1.value = num

  // 如果通知是未读状态，则更新为已读
  if (noticeItem.status !== '已处理') {
    try {
      await updateNotificationStatus(noticeItem.messageId, '已查看')
      // 更新本地数据状态
      noticeItem.status = '已查看'
      // 重新获取通知列表以保持状态同步
      await getWarehouseNotices()
    } catch (error) {
      console.error("更新通知状态失败", error)
    }
  }


  getListBom(productId).then(response => {
    BomData.value = response.rows.filter(item => {
      return item.quantity * num > item.quantityOnhand
    })
    showNotic.value = true
    // console.log("BomData", BomData.value);
  })

}

//点击完成通知按钮
async function finishNoticClick(noticeid, message) {
  //确认一下
  proxy.$modal.confirm('确认后无法查看，是否确认完成通知？').then(function () {
    return updateNotificationStatus(noticeid, message)
  }).then(() => {
    proxy.$modal.msgSuccess("完成通知成功")
    getWarehouseNotices()
  }).catch(() => { })

}
async function finishNoticClick2(noticeid, message) {
  updateNotificationStatus(noticeid, message)
}
</script>

<template>
  <div>
    <!-- 加载状态显示 -->
    <div v-if="currUser.roles.length === 0 && !Object.keys(currUser).length">
      <el-loading fullscreen text="加载中..."></el-loading>
    </div>

    <!-- admin角色内容 -->
    <div class="app-container" v-if="hasRole('admin') || hasRole('shangchan') || hasRole('shebei')">
      <!-- 如果审核人是当前用户，则弹出来提示框 -->
      <el-dialog v-if="centerDialogVisible" v-model="centerDialogVisible" title="您有新的审核任务" width="500" align-center>
        <p v-for="item in auditNotifications">{{ item.messageTitle }}</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handSHnotice">
              知道了
            </el-button>
          </div>
        </template>
      </el-dialog>



      <div class="top">
        <el-card style="width: 20%" shadow="always" class="card-box" @click="newTablebutton = 'ture'">
          <div class="card-inner">
            <div class="card-item-image">
              <img src="@/image/设备.png" alt="设备总数图标">
            </div>
            <div class="card-item">
              <p class="text">设备总数</p>
              <p class="top_number">{{ alldevice }}</p>
            </div>
          </div>
        </el-card>
        <el-card style="width: 20%" shadow="always" class="card-box">
          <div class="card-inner">
            <div class="card-item-image">
              <img src="@/image/运行中.png" alt="运行中设备图标">
            </div>
            <div class="card-item">
              <p class="text">运行中</p>
              <p class="top_number">{{ deviceNum }}</p>
            </div>
          </div>
        </el-card>
        <el-card style="width: 20%" shadow="always" class="card-box">
          <div class="card-inner">
            <div class="card-item-image">
              <img src="@/image/standby.png" alt="待机设备图标">
            </div>
            <div class="card-item" @click="showToday">
              <p class="text">今日任务数</p>
              <p class="top_number">{{ todayCount }}</p>
            </div>
          </div>
        </el-card>
        <el-card style="width: 20%" shadow="always" class="card-box">
          <div class="card-inner">
            <div class="card-item-image">
              <img src="@/image/故障信息.png" alt="故障设备图标">
            </div>
            <div class="card-item">
              <p class="text">故障数</p>
              <p class="top_number">1024</p>
            </div>
          </div>
        </el-card>
      </div>
      <el-dialog v-model="newTablebutton" title="设备列表" width="1200px" destroy-on-close center>
        <Machinery :from-where="'homeindex'"></Machinery>
      </el-dialog>

      <div ref="chartRef" id="middle" style="width: 100%; height: 400px;">
      </div>

      <div class="content">
        <el-card class="workorder-card">
          <template #header>
            <div class="card-header">
              <span>近一周工单量</span>
            </div>
          </template>
          <el-table :data="tableData" height="550" style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" border stripe>
            <el-table-column prop="createTime" label="工单日期" width="180" align="center" />
            <el-table-column prop="workorderCode" label="工单编号" width="130" align="center" />
            <el-table-column prop="workorderName" label="工单名称" width="180" show-overflow-tooltip />
            <el-table-column prop="productName" label="产品名称" width="100" align="center" />
            <el-table-column prop="productSpc" label="规格型号" width="100" align="center" />
            <el-table-column prop="quantity" label="生产数量" width="80" align="center" />
            <el-table-column prop="quantityChanged" label="调整数量" width="80" align="center" />
            <el-table-column prop="quantityProduced" label="已生产数量" width="100" align="center" />
            <el-table-column prop="quantityScheduled" label="计划数量" width="80" align="center" />
            <el-table-column prop="requestDate" label="需求日期" width="100" align="center" />
            <el-table-column prop="status" label="工单状态" width="130" align="center">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>

    <!-- 仓库角色内容 -->
    <div class="app-container" v-if="hasRole('cangku')">
      <div class="warehouse-header">
        消息通知
      </div>

      <!-- 仓库其他内容 -->
      <div class="warehouse-content">
        <!-- 1. 有通知时：循环渲染通知卡片 -->
        <div class="notification-cards" v-if="warehouseNotifications.length > 0">
          <el-card v-for="item in warehouseNotifications" :key="item.messageId" class="notice-card">
            <template #header>
              <div class="card-header">
                <!-- 未读通知添加红色角标 -->
                <span class="notice-type">
                  {{ item.messageType }}
                </span>
                <!-- 显示通知时间（格式化处理） -->
                <span class="notice-time" style="margin-left: 10px;">{{ formatTime(item.createTime) }}</span>
                <span class="unread-tag" style="margin-left: 150px;" v-if="item.status == '未处理'">未读</span>
                <span class="ungreen-tag" style="margin-left: 150px;" v-else-if="item.status == '已查看'">已读</span>
              </div>
            </template>
            <div class="notice-body">
              <h4 class="notice-title">{{ item.messageTitle }}</h4>
              <!-- 显示通知摘要（超出部分省略） -->
              <p class="notice-desc" v-if="item.remark">
                备注说明: {{ item.remark.length > 50 ? item.remark.slice(0, 50) + '...' : item.remark }}
              </p>
              <div class="notice-actions">
                <el-button type="primary" size="small"
                  @click="ShowNoticClick(item.remark, item.attr1, item)">查看详情</el-button>
                <el-button type="success" size="small" @click="finishNoticClick(item.messageId, '已处理')"
                  :disabled="item.status === '已处理'">
                  {{ item.status === '已处理' ? '已完成' : '标记完成' }}
                </el-button>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 2. 无通知时：显示空状态提示 -->
        <div class="empty-notifications" v-else>
          <div class="empty-icon">
            <!-- 使用Element Plus图标或自定义图片 -->
            <el-icon size="60" color="#ccc">
              <MessageFilled />
            </el-icon>
          </div>
          <div class="empty-text">暂无通知消息</div>
          <div class="empty-desc">您的仓库相关通知将显示在这里</div>
          <el-button type="text" class="refresh-btn" @click="getWarehouseNotices()" />
          <el-icon size="16" color="#409EFF" style="cursor: pointer;">
            <Refresh />
          </el-icon>
          刷新通知
        </div>
      </div>


      <!-- 查看通知的详细内容 -->
      <el-dialog title="通知详情" v-model="showNotic" width="1200px" append-to-body>
        <div class="notic-content">
          <el-table :data="BomData" style="width: 100%">
            <el-table-column prop="bomItemCode" label="BOM物料编号" width="180" />
            <el-table-column prop="bomItemName" label="BOM物料名称" width="180" />
            <el-table-column prop="bomItemSpec" label="规格型号" width="120" />
            <el-table-column prop="itemOrProduct" label="物料/产品" width="120" />
            <el-table-column prop="quantity" label="预计使用量" width="120">
              <template #default="scope">
                {{ scope.row.quantity * num1 }}
              </template>
            </el-table-column>
            <el-table-column prop="unitOfMeasure" label="单位" width="120" />
            <el-table-column prop="quantityOnhand" label="剩余库存量" width="120" />
            <el-table-column prop="" label="最小入库数" width="120" align="center">
              <template #default="scope">
                <!-- 计算：预计使用量（quantity * num1）- 剩余库存量（quantityOnhand），差值为负时显示0 -->
                {{ Math.max(0, Number(scope.row.quantity) * Number(num1)) - Number(scope.row.quantityOnhand) }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="是否充足" width="80">
              <template #default="scope">
                <span :style="{ color: (scope.row.quantity * num1 <= scope.row.quantityOnhand) ? '' : 'red' }">
                  {{ (scope.row.quantity * num1 <= scope.row.quantityOnhand) ? '是' : '否' }} </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>

    <!-- 生产角色内容 和admin一样-->
    <!-- <div class="app-container" v-if="hasRole('shangchan')">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>生产管理中心</span>
          </div>
        </template>
        <p>今日生产计划：222</p>
        <p>生产进度：68%</p>
        <p>待处理生产异常：0</p>
      </el-card>
    </div> -->

    <!-- 无任何角色时显示 -->
    <div class="app-container" v-if="currUser.roles.length > 0 &&
      !hasRole('admin') && !hasRole('cangku') && !hasRole('shangchan') && !hasRole('shebei')">
      <el-empty description="暂无访问权限，请联系管理员"></el-empty>
    </div>
    <!-- 任务展示 -->
    <el-dialog title="当天生产任务" v-model="openTask" width="1200px" append-to-body>
      <div class="notic-content">
        <el-table :data="todayRenwu">
          <el-table-column label="任务编号" align="center" prop="taskCode" />
          <el-table-column label="任务名称" align="center" prop="taskName" />
          <el-table-column label="工作站编号" align="center" prop="workstationCode" />
          <el-table-column label="工作站名称" align="center" prop="workstationName" />
          <el-table-column label="工序名称" align="center" prop="processName" />
          <!-- <el-table-column label="产品物料编码" align="center" prop="itemCode" />
          <el-table-column label="产品物料名称" align="center" prop="itemName" />
          <el-table-column label="规格型号" align="center" prop="specification" /> -->
          <el-table-column label="排产数量" align="center" prop="quantity" />
          <el-table-column label="已生产数量" align="center" prop="quantityProduced" />
          <el-table-column label="开始生产时间" align="center" prop="startTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="生产时长" align="center" prop="duration" />
          <el-table-column label="完成生产时间" align="center" prop="endTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>

        <!-- <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    /> -->
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.top {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
}


:deep(.el-card__body) {
  padding: 0px 20px 20px 20px !important;
}

.card-box {
  height: 85%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.card-inner {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card-item-image img {
  width: 50px;
  height: 50px;
}

.card-item {
  text-align: center;
}

.text {
  font-size: 18px;
  color: #999;
  font-weight: bold;
}

.top_number {
  font-size: 20px;
  font-weight: bold;
}

.content {
  margin-top: 30px;
}

.workorder-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.workorder-card .el-card__header) {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

:deep(.el-table th) {
  font-weight: bold;
}

:deep(.el-table .el-table__cell) {
  padding: 8px 0;
}

:deep(.el-table .el-table__row:hover) {
  background-color: #f5f7fa;
}

/* 仓库角色样式 */
.warehouse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
}

:deep(.el-button) {
  position: relative;
}

.notification-panel {
  padding: 10px 0;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 10px;
  border-bottom: 1px solid #eee;
}

.notification-list {
  max-height: 300px;
  overflow-y: auto;
}

.notification-item {
  padding: 12px 15px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification-item:hover {
  background-color: #f5f7fa;
}

.notification-item.unread {
  background-color: #fff8e6;
}

.notice-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.notice-content {
  font-size: 14px;
}

.no-notifications {
  text-align: center;
  padding: 20px;
  color: #999;
}

.warehouse-content {
  margin-top: 20px;
}


/* 仓库通知卡片样式优化 */
.warehouse-content {
  margin-top: 20px;
}

.notification-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  /* 卡片之间间距 */
}

.notice-card {
  transition: all 0.3s ease;
}

.notice-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

:deep(.notice-card .el-card__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #fafafa;
}

.notice-type {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.unread-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  background-color: #ff4d4f;
  border-radius: 4px;
}

.ungreen-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 12px;
  color: #fff;
  background-color: #58d852;
  border-radius: 4px;
}

.notice-time {
  font-size: 12px;
  color: #999;
}

.notice-body {
  padding: 20px;
}

.notice-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 500;
}

.notice-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

.notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  /* 按钮之间间距 */
}

/* 无通知空状态样式 */
.empty-notifications {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  background-color: #fafafa;
  border-radius: 8px;
  margin: 20px 0;
}

.empty-icon {
  margin-bottom: 20px;
}

.empty-text {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  color: #999;
  margin-bottom: 24px;
}

.refresh-btn {
  color: #409EFF;
  font-size: 14px;
}

.refresh-btn:hover {
  color: #66b1ff;
}
</style>
